<template>
  <div class="home">
    <ParticleBackground />
    <div class="content">
      <h1>智慧植物健康诊断系统</h1>
      <p>基于 AI 的植物病害识别与养护平台</p>

      <!-- 主功能入口 -->
      <div class="nav-buttons">
        <el-button type="success" round @click="goToPlantDiagnosis">
          <el-icon><Microscope /></el-icon> 病害检测
        </el-button>

        <el-button type="primary" round @click="goToConsultExpert">
          <el-icon><User /></el-icon> 专家咨询
        </el-button>

        <el-button type="warning" round @click="goToCommunication">
          <el-icon><ChatDotRound /></el-icon> 交流平台
        </el-button>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <footer class="footer">
      <el-row justify="center" :gutter="20">
        <el-col :span="8" class="footer-link" @click="goToPlantDiagnosis">
          <el-icon><Microscope /></el-icon>
          <span>病害检测</span>
        </el-col>
        <el-col :span="8" class="footer-link" @click="goToConsultExpert">
          <el-icon><User /></el-icon>
          <span>专家咨询</span>
        </el-col>
        <el-col :span="8" class="footer-link" @click="goToCommunication">
          <el-icon><ChatDotRound /></el-icon>
          <span>交流平台</span>
        </el-col>
      </el-row>
    </footer>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import ParticleBackground from '../components/ParticleBackground.vue'
import { useRouter } from 'vue-router' // 引入路由钩子
import { onMounted } from 'vue'

// 获取路由实例
const router = useRouter()

// 专家咨询页面跳转
const goToConsultExpert = () => {
  router.push('/consult-expert') // 在函数中调用路由跳转
}

// 交流平台页面跳转
const goToCommunication = () => {
  router.push('/communication-platform')
}
// 点击事件方法：跳转外部链接
const goToPlantDiagnosis = () => {
  // 可选：添加额外逻辑（如提示、权限判断等）
  ElMessage.info('即将跳转到植物健康诊断系统...')

  // 方式1：当前窗口跳转（覆盖当前页面）
  window.location.href = 'http://hdnla.asia/leaves/'

  // 方式2：新窗口跳转（不覆盖当前页面，推荐）
  // window.open('http://hdnla.asia/leaves/', '_blank')
}

onMounted(() => {
  ElMessage.success('欢迎来到智慧植物健康诊断系统！')
})
</script>

<style scoped>
.home {
  position: relative;
  height: 100vh;
  color: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.content {
  position: relative;
  z-index: 1;
  margin-top: 20vh;
}

.nav-buttons {
  margin-top: 40px;
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.footer {
  background: rgba(0, 0, 0, 0.4);
  padding: 15px 0;
  position: sticky;
  bottom: 0;
  backdrop-filter: blur(6px);
}

.footer-link {
  text-align: center;
  color: white;
  cursor: pointer; /* 已有，保留 */
  transition: color 0.3s ease; /* 加过渡，hover 更丝滑 */
  padding: 10px 0; /* 加内边距，扩大点击区域 */
}
.footer-link span {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.footer-link:hover {
  color: #67c23a;
}
</style>
